<template>
	<view class="">
		<u-navbar title="帮助中心" :autoBack="true" :placeholder="true"></u-navbar>
		<view style="padding: 0 20rpx;margin-top: 30rpx;">
			<u-search placeholder="请输入你想了解的问题" v-model="keyword" actionText="查询" @focus="focus"
				:borderColor="active ? '#0035ff63':'#e3e3e3'" @blur="blur" shape="square" bgColor="#fff"
				@custom="custom"></u-search>
		</view>
		<view style="margin: 24rpx;color: #2f28287d;font-size: 24rpx;">
			已找到{{total}}个结果
		</view>
		<view class="ser">
			<view class="item" @click="goto('/subPages/helpCenter/helpCenterDetail?id='+item.id)" v-for="item in list"
				:key="item.id">
				<view class="h">{{item.title}}</view>
				<view class="con">
					{{item.subcribe}}
				</view>
				<view style="color: #2f28287d;font-size: 24rpx;">
					{{item.flag}}
				</view>

			</view>

			<!-- <view class="page">
			
			</view> -->
		</view>
		<u-loadmore :status="status" />

	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: '',
				status: 'loadmore',
				active: false,
				keyword: '',
				list: [{
					name: '视频'
				}, {
					name: 'FAQ'
				}],
				swiperCurrent: 0,
				current: 0,
				page: 1,
				number: 5,
				pageCount: null

			}
		},
		async onLoad() {
			console.log(this.page);
			let res = await this.$api.gethelplist({
				page: this.page,
				total: this.number
			})
			this.list = res.data.data
			this.total = res.data.total
			console.log(res);
			console.log((Number)(10 / 3));
			//判断是否有余数 就+1  否则 0  计算页数
			console.log(this.total % 6);
			this.pageCount = this.total % 6 !== 0 ? (
				Math.trunc(this.total / 6) + 1) : this.total / 6
			console.log(this.pageCount);

		},
		async onReachBottom() {
			if (this.page > this.pageCount) return this.status = 'nomore'
			this.status = 'loading'
			this.page = this.page + 1
			let page = this.page
			console.log(page);
			let res = await this.$api.gethelplist({
				page,
				total: 6
			})
			console.log(res.data.data);
			this.list = [...this.list, ...res.data.data]
			this.status = 'loadmore'
			// console.log(res);
			// if (this.page >= 3) return;
			// this.status = 'loading';
			// this.page = ++this.page;
			// setTimeout(() => {
			// 	this.list += 10;
			// 	if (this.page >= 3) this.status = 'nomore';
			// 	else this.status = 'loading';
			// }, 2000)
		},
		methods: {
			goto(v) {
				uni.navigateTo({
					url: v
				})
			},
			blur() {
				this.active = !this.active
			},
			focus() {
				this.active = true
			},
			tabchange(e) {
				this.swiperCurrent = e.index
			},
			custom() {
				this.search(this.keyword)
			},
			animationfinish() {},
			transition(e) {
				// console,log(e);
			},
			swiperChange(e) {
				console.log(e);
				this.current = e.detail.current;
			},
			async search(string) {
				let res = await this.$api.gethelplist({
					keywords: string
				})
				this.list = res.data.data
				this.total = res.data.total

			},
		},

	}
</script>
<style>
	page {
		background-color: #fff
	}
</style>

<style lang="scss" scoped>
	.page {
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
		align-items: center;
	}

	.tab-box {
		margin-top: 20rpx;
		background-color: white;
	}

	.ser {
		padding: 0 20rpx;
		font-size: 24rpx;

		.item {
			border-bottom: 2rpx solid #eee;
			padding: 30rpx 0;

			.h {
				font-weight: 800;
				font-size: 32rpx;
			}

			.con {
				margin: 10rpx 0;
				line-height: 40rpx;
			}
		}
	}
</style>